<template>
	<view>
		<!-- 施工人员证件照 -->
		<view class="photoId">
			<view>
				<!-- avatar -->
				<fileImage defaultImg="http://106.14.56.171:15016/images/epoxyPouringImages/avatar.png"
					src="conMation.certificateList" :className="['cidental']" />
			</view>
			<!-- 身份消息 -->
			<view class="identityMessages">
				<view>
					<image src="http://106.14.56.171:15016/images/ID.png"></image>
					<text>{{conMation.userName}}</text>
				</view>
				<view>
					<image src="http://106.14.56.171:15016/images/phone.png" mode="">
					</image>
					<text @click="callPhone(conMation.phone)">{{conMation.phone}}</text>
				</view>
				<view>
					<image src="http://106.14.56.171:15016/images/documents.png"></image>
					<text>{{conMation.userAuto}}</text>
				</view>
			</view>
		</view>
		<!-- 施工证件 -->
		<view class="constructionCertificate" v-if="conMation.certificateList && conMation.certificateList.length">
			<view class="">
				<h3>施工证件</h3>
			</view>
			<view v-for="(item,index) in conMation.certificateList" :key="index" @click="viewPhoto(item)">
				<fileImage defaultImg="http://106.14.56.171:15016/images/epoxyPouringImages/badge.png" :src="item"
					:className="['bigCertificate']" />
			</view>
		</view>
		<!-- 暂无数据施工图片 -->
		<view class="constructionCertificate noneData" v-else>
			<image src="http://106.14.56.171:15016/images/images(4)(1)/images/noMessige.png" mode=""></image>
			<text>暂无数据...</text>
		</view>
	</view>
</template>

<script>
	import fileImage from '@/components/fileImage/fileImage.vue'
	export default {
		components: {
			fileImage
		},
		data() {
			return {
				userID: '', //接单人ID
				conMation: {
					certificateList: [], //证件照
				}, //施工人员工作信息

			}
		},
		onLoad(options) {
			if (!options.userId) {
				uni.navigateBack({
					delta: 1
				})
				return;
			}
			this.userID = options.userId;
			this.constructionId(); //施工人员工作照片

		},
		methods: {
			// 查看证件照
			viewPhoto(item) {
				// console.log('查看证件照', item);
				// 要加个判断,如果不加判断,也可以,但苹果手机点击空白的照片时,返回不了页面
				if (!item) {
					uni.showToast({
						title: '暂无图片',
						icon: 'none'
					})
					return;
				}
				uni.previewImage({
					current: 0,
					urls: [item]
				})
			},
			//点击打电话
			callPhone(phone) {
				console.log(phone);
			},
			// 施工人员工作照片
			constructionId() {
				this.$http.get(`api/EpoxyProject/EpoxyUserCertificate?userId=${this.userID}`).then(res => {
					this.conMation = res
					// console.log('施工人员工作照片', this.conMation);

				})
			}
		}
	}
</script>
<style lang="less" scoped>
	// 施工人员证件照
	.photoId {
		width: 95%;
		height: 250rpx;
		background-color: #ffffff;
		margin: auto;
		margin-top: 40rpx;
		border-radius: 15rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}

	.photoId>view:nth-child(1) {
		width: 200rpx;
		height: 210rpx;
		border-radius: 100rpx;
		overflow: hidden;
	}

	.photoId>view:nth-child(2) {
		width: 45%;
		height: 100%;
		// background-color: aqua;
	}

	// 身份消息
	.identityMessages>view {
		width: 85%;
		// background-color: red;
		margin-top: 35rpx;
		display: flex;
		flex-direction: row;

		>image {
			width: 40rpx;
			height: 40rpx;
		}

		>text {
			margin-left: 40rpx;
		}
	}

	// 施工证件
	.constructionCertificate {
		width: 95%;
		background-color: #ffffff;
		margin: auto;
		margin-top: 20rpx;
		border-radius: 15rpx;

		>view {
			width: 95%;
			margin: auto;
			// background-color: aqua;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			padding: 0 0 40rpx 0;
		}

		>view:nth-child(1) {
			position: relative;
			top: 30rpx;
			margin-left: -240rpx;
		}
	}

	// 暂无数据
	.noneData {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-around;
		padding: 20rpx 0 20rpx 0;

		>image {
			width: 92rpx;
			height: 92rpx;
		}

		>text {
			margin-top: 20rpx;
			font-size: 26rpx;
		}
	}
</style>
<style lang="scss">
	.cidental {
		width: 200rpx;
		height: 210rpx;
	}

	.bigCertificate {
		width: 580rpx;
		height: 450rpx;
		border-radius: 40rpx;
		// margin-top: 20rpx;
	}
</style>
